<!-- 
    传入的参数：
      isCollapse: 是否展开侧边栏
      openeds:侧边栏打开的模块
      active：侧边栏对应的模块
    内容事件:
      menuIconCom: 转化侧边栏模块icon图标
      goPath: 跳转到对应路由
    字父通信
      currLabelEmits：改变当前导航栏指定的页面值
-->
<template>
  <el-scrollbar class="menu_content">
    <el-menu active-text-color="#ffd04b" background-color="#2d3436" class="menu_inner" :default-active="active"
      text-color="#fff" @open="handleOpen" @close="handleClose" @select="onClickMenu" :collapse="!isCollapse"
      :default-openeds="openeds">
      <template v-for="(item, index) in menuList" :key="index">
        <el-sub-menu v-if="item.children" :index="index + 1">
          <template #title>
            <el-icon>
              <component :is="menuIconCom(item.meta.icon)" />
            </el-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <div v-for="(litem, lindex) in item.children" :key="lindex">
            <el-menu-item v-if="!litem.children" :index="`${index + 1}-${lindex + 1}`"
              :style="{ display: Boolean(litem.meta.title) ? 'blockindex' : 'none' }"
              @click="goPath(litem.path, litem.name, litem.meta.title, litem.meta.openeds, litem.meta.active)">
              {{ litem.meta.title }}
            </el-menu-item>
            <el-sub-menu v-else-if="litem.children" :index="`${index + 1}-${lindex + 1}`">

              <template #title>
                <el-icon>
                  <component :is="menuIconCom(item.meta.icon)" />
                </el-icon>
                {{ litem.meta.title }}
              </template>
              <el-menu-item :index="`${index + 1}-${lindex + 1}-${cindex + 1}`" v-for="(ctem, cindex) in litem.children"
                @click="goPath(ctem.path, ctem.name, ctem.meta.title, ctem.meta.openeds, ctem.meta.active)">{{
      ctem.meta.title
    }}</el-menu-item>
            </el-sub-menu>
          </div>
        </el-sub-menu>
        <el-menu-item v-else-if="!item.children && item.meta.title" :index="index + 1"
          @click="goPath(item.path, item.name, item.meta.title, item.meta.openeds, item.meta.active)">
          <el-icon>
            <component :is="menuIconCom(item.meta.icon)" />
          </el-icon>

          <template #title>{{ item.meta.title }}</template>
        </el-menu-item>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
import { ref } from "vue";
import routerList from "@/router/index";
import {
  Location,
  Grid,
  Setting,
  Service,
  User,
  Aim,
  Goods,
  Present,
  Calendar,
  OfficeBuilding,
  School,
  Collection,
} from "@element-plus/icons-vue";
// 菜单列表项
defineProps({
  isCollapse: Boolean,
  openeds: [],
  active: 1
});
const menuList = ref([]);
menuList.value = routerList.options.routes[0].children;
const router = useRouter();
import { useCommonStore } from "@/stores/common";
let { labelList, currLabel, saveLabelList, saveCurrLabel } = useCommonStore();
// emits
const emits = defineEmits("currLabelEmits");
// 图标转化
const menuIconCom = (icon) => {
  switch (icon) {
    case "el-icon-home":
      return OfficeBuilding;
    case "el-icon-user":
      return User;
    case "el-icon-user":
      return Service;
    case "el-icon-user-solid":
      return User;
    case "el-icon-office-building":
      return Aim;
    case "el-icon-goods":
      return Goods;
    case "el-icon-camera":
      return Present;
    case "el-icon-help":
      return Calendar;
    case "el-icon-student":
      return OfficeBuilding;
    case "el-icon-project":
      return School;
    case "el-icon-collection":
      return Collection;
    default:
      return Grid;
  }
};
// 跳转路由
const goPath = (path, name, title, openeds, active) => {
  let labelArray = labelList;
  let currLabelValue = currLabel;
  const plugin = labelArray.filter((item, index) => {
    return item.path == path
  });
  if (!plugin.length) {
    labelArray.push({ name: name, title: title, path: path, openeds: openeds, active: active });
    saveLabelList(labelArray);
  }
  currLabelValue = name;
  saveCurrLabel(currLabelValue);
  emits("currLabelEmits", {
    name: currLabelValue,
    openeds: openeds,
    active: active
  })
  router.replace(path);
}
const handleOpen = (key, keyPath) => { };
const handleClose = (key, keyPath) => { };
</script>

<style lang="scss" scoped>
.menu_content {
  width: auto;
  height: calc(100% - 60px);
  position: fixed;
  top: 60px;
  left: 0;
}

.menu_inner:not(.el-menu--collapse) {
  width: 200px;
  min-height: calc(100vh - 60px);
}
</style>